<template>
  <div style="padding: 20px;">
    <Row>
      <i-col span="24">
        <Input placeholder="搜索订单编号" v-model="orderShowId" style="width: 150px;margin-bottom: 10px" />
        <Button style="margin: 0 10px 10px 0;" type="primary" @click="searchShop">搜索</Button>
      </i-col>
      <i-col span="24">
        <Table border :columns="orderTitle" :data="orderList"></Table>
        <Page :total="total" show-elevator @on-change="pageChange" style="text-align:right;margin-top: 15px;"/>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import {formatDate} from '@/config/date'
  export default {
    name: 'shop',
    data () {
      return {
        number: 0,
        total: 0,
        orderShowId: '',
        orderTitle: [
          {
            title: '订单编号',
            align: 'center',
            key: 'orderShowId',
            tooltip: true
          },
          {
            title: '姓名',
            align: 'center',
            render: (h, params) => {
              return h('div', params.row.shippingCustomerName)
            }
          },
          {
            title: '手机号',
            align: 'center',
            tooltip: true,
            render: (h, params) => {
              return h('div', params.row.shippingCustomerTelephone)
            }
          },
          {
            title: '下单时间',
            align: 'center',
            tooltip: true,
            render: (h, params) => {
              return h('div', formatDate(new Date(params.row.orderCreateTime), 'yyyy-MM-dd hh:mm')
              )
            }
          },
          {
            title: '付款（元）',
            tooltip: true,
            align: 'center',
            key: 'orderPrice'
          },
          {
            title: '购买商品',
            align: 'center',
            tooltip: true,
            render: (h, params) => {
              return h('div', params.row.shippingCustomerTelephone)
            }
          },
          {
            title: '订单状态',
            align: 'center',
            render: (h, params) => {
              const row = params.row
              const color = row.orderStatus === '1' ? 'primary' : row.orderStatus === '0' ? 'error' : ''
              const text = row.orderStatus === '1' ? '正常' : row.orderStatus === '0' ? '禁用' : ''
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: color
                }
              }, text)
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      console.log(params)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '你确定删除该用户吗？',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => {
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        orderList: []
      }
    },
    mounted () {
      this.orderListPage()
    },
    methods: {
      length (text) {
        let str = text
        if (str.length > 6) {
          return str.substring(0, 6) + '...'
        } else {
          return str
        }
      },
      orderListPage() {
        let url = '/api/goods/order/page'
        let form = {
          orderShowId: this.orderShowId,
          pageNumber: this.number,
          pageSize: 10
        }
        this.$get(url, form).then((res) => {
          if (res.code === 200) {
            this.orderList = res.data.list
          }
        })
      },
      searchShop() {
        if (!this.searchStoreName) {
          this.$Message.warning('请输入查询条件')
          return false
        }
      },
      pageChange (change) {
        let number = change - 1
        this.number = number
      }
    }
  }
</script>

<style scoped>
  .ivu-row {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .selector .ivu-row ivu-col-span-8{
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 33% !important;
  }
</style>
